<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router';
import type { articleData } from '@/utils/interface'
import { getArticleByIdApi } from '@/api/article_api'
import { getTime } from '@/utils/time';
import { useCountStore } from '@/stores/count';
import { useSubsetStore } from '@/stores/subset';
import { useSubset } from '@/hooks/subsetHook'
import Comments from '@/components/comments/comments.vue'
const { getSubset } = useSubset()
const subsetStore = useSubsetStore();
const countStore = useCountStore();
const route = useRoute();
const id = computed<number>(() => Number(route.params.id));
const articleDetail = ref<articleData>({
  id: 0,
  title: '',
  cover: '',
  created_at: new Date(),
  subset_id: 0,
  label: '',
  introduce: '',
  views: 0,
  comment: 0,
  praise: 0,
  state: 0,
  content: ''
})

const stringToArray = (str: string | undefined) => {
  return str?.split(",").map(item => item.trim());
}


const getArticleDetail = async () => {
  const res = await getArticleByIdApi({ id: id.value })
  articleDetail.value = res.data.data
}


onMounted(() => {
  getArticleDetail()
  getSubset(0)

})

</script>

<template>
  <div class="flex flex-col justify-center items-center ">
    <!-- 封面区 -->
    <div class="w-full bg-linear-to-t from-purple-800 to-slate-800 text-white mb-5">
      <main class="min-h-[40vh] flex justify-center items-center w-full relative">
        <!-- 搜索区域 -->
      </main>
    </div>
    <!-- 手机端卡片上 -->
    <div class="lg:hidden space-y-1 mb-5
    sm:w-[320px]
    md:w-[480px] ">
      <!-- 个人卡片 -->
      <div
        class="px-6 py-8 bg-gradient-to-br from-blue-50 to-purple-50 rounded-2xl shadow-lg mb-5 border border-gray-100">
        <!-- 头像和基本信息 -->
        <div class="flex flex-col items-center mb-4">
          <div class="relative group mb-3">
            <!-- 头像光晕效果 -->
            <div
              class="absolute inset-0 bg-gradient-to-r from-blue-400 to-purple-400 rounded-full blur opacity-75 group-hover:opacity-100 transition-opacity duration-300">
            </div>
            <img src="@/assets/logo.png" alt="作者头像"
              class="relative w-16 h-16 rounded-full border-4 border-white shadow-lg transition-transform duration-300 group-hover:scale-110" />
          </div>
          <h3 class="text-lg font-bold text-gray-800 mb-1">博客作者</h3>
          <p class="text-sm text-gray-600 text-center">热爱分享技术与生活</p>
        </div>

        <!-- 统计数据 -->
        <div class="grid grid-cols-2 gap-3 mb-4">
          <div class="text-center bg-white/50 rounded-lg p-2 backdrop-blur-sm">
            <div class="text-blue-600 font-bold text-lg">{{ countStore.articleCount }}</div>
            <div class="text-xs text-gray-500">文章</div>
          </div>
          <div class="text-center bg-white/50 rounded-lg p-2 backdrop-blur-sm">
            <div class="text-green-600 font-bold text-lg">{{ countStore.galleryCount }}</div>
            <div class="text-xs text-gray-500">图库</div>
          </div>
          <div class="text-center bg-white/50 rounded-lg p-2 backdrop-blur-sm">
            <div class="text-purple-600 font-bold text-lg">{{ countStore.diaryCount }}</div>
            <div class="text-xs text-gray-500">随笔</div>
          </div>
          <div class="text-center bg-white/50 rounded-lg p-2 backdrop-blur-sm">
            <div class="text-orange-600 font-bold text-lg">
              {{ countStore.articleCount + countStore.galleryCount + countStore.diaryCount }}</div>
            <div class="text-xs text-gray-500">总计</div>
          </div>
        </div>

        <!-- 联系信息 -->
        <div class="text-center">
          <div class="inline-flex items-center space-x-2 bg-white/70 backdrop-blur-sm rounded-full px-4 py-2">
            <span class="text-gray-600 text-sm">📧 联系作者</span>
          </div>
        </div>
      </div>
      <!-- 分类标签 -->
      <div class="px-6 py-5 bg-gradient-to-br from-white to-gray-50 rounded-2xl shadow-lg border border-gray-100 backdrop-blur-sm">
        <!-- 标题 -->
        <div class="flex items-center mb-4">
          <div class="w-1 h-6 bg-gradient-to-b from-blue-500 to-purple-600 rounded-full mr-3"></div>
          <h3 class="text-xl font-bold text-gray-800">文章信息</h3>
        </div>
        
        <!-- 分类信息 -->
        <div class="mb-4">
          <div class="flex items-center mb-2">
            <span class="text-sm font-medium text-gray-600 mr-3">📂 分类</span>
            <span class="px-3 py-1 bg-gradient-to-r from-blue-100 to-blue-50 text-blue-700 rounded-full text-sm font-medium border border-blue-200">
              {{ subsetStore.subsetName(articleDetail.subset_id) }}
            </span>
          </div>
        </div>
        
        <!-- 标签区域 -->
        <div v-if="articleDetail.label">
          <div class="flex items-center mb-3">
            <span class="text-sm font-medium text-gray-600 mr-3">🏷️ 标签</span>
          </div>
          <div class="flex flex-wrap gap-2">
            <div v-for="(tag, index) in stringToArray(articleDetail.label)" :key="tag" 
                 class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium transition-all duration-300 transform hover:scale-105 hover:shadow-md"
                 :class="[
                   index % 3 === 0 ? 'bg-gradient-to-r from-sky-100 to-sky-50 text-sky-700 border border-sky-200 hover:from-sky-200 hover:to-sky-100' :
                   index % 3 === 1 ? 'bg-gradient-to-r from-amber-100 to-amber-50 text-amber-700 border border-amber-200 hover:from-amber-200 hover:to-amber-100' :
                   'bg-gradient-to-r from-rose-100 to-rose-50 text-rose-700 border border-rose-200 hover:from-rose-200 hover:to-rose-100'
                 ]">
              {{ tag }}
            </div>
          </div>
        </div>
        
        <!-- 无标签提示 -->
        <div v-else class="text-center py-4">
          <span class="text-gray-400 text-sm">暂无标签</span>
        </div>
      </div>
    </div>
    <!-- 内容 -->
    <div class="flex mb-5
    sm:w-[320px]
    md:w-[480px]
    lg:w-[1024px] lg:space-x-[10px] lg:min-h-[800px]">
      <div class="w-full lg:w-[800px]">
        <!-- 内容区 -->
        <div class="w-full  bg-white rounded-2xl shadow-2 mb-5">
          <div class="px-10 py-5">
            <!-- 标题 -->
            <div class="sm:text-2xl md:text-3xl lg:text-4xl mb-3">
              {{ articleDetail.title }}
            </div>
            <!-- 日期 -->
            <div class="textColor-1">
              发布于{{ getTime(articleDetail.created_at) }}
            </div>
          </div>
          <!-- 简介 -->
          <div class="w-auto border-l-4 border-amber-400 bg-amber-50 px-10 py-3 lg:py-5 mx-10 rounded-xl mb-10">
            <p v-if="articleDetail.introduce" class="extColor-1 leading-relaxed sm:text-lg md:text-xl lg:text-2xl">
              {{ articleDetail.introduce }}
            </p>
            <p v-else class="textColor-1 leading-relaxed">
              暂无简介
            </p>
          </div>
          <!-- 内容 -->
          <div class="htmlcontent w-auto px-10 pb-3 text-gray-800 leading-relaxed font-serif
            sm:text-base sm:leading-7
            md:text-lg md:leading-8
            lg:text-xl lg:leading-9
            [&_h1]:text-2xl [&_h1]:font-bold [&_h1]:mt-8 [&_h1]:mb-4
            [&_h2]:text-xl [&_h2]:font-semibold [&_h2]:mt-6 [&_h2]:mb-3
            [&_h3]:text-lg [&_h3]:font-medium [&_h3]:mt-5 [&_h3]:mb-2
            [&_p]:mb-4
            [&_ul]:list-disc [&_ul]:pl-6 [&_ul]:mb-4
            [&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:mb-4
            [&_li]:mb-2
            [&_blockquote]:border-l-4 [&_blockquote]:border-gray-300 [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:my-4
            [&_code]:bg-gray-100 [&_code]:px-2 [&_code]:py-1 [&_code]:rounded [&_code]:text-sm
            [&_pre]:bg-gray-100 [&_pre]:p-4 [&_pre]:rounded-lg [&_pre]:overflow-x-auto [&_pre]:mb-4
            [&_a]:text-blue-600 [&_a]:hover:underline
            [&_img]:max-w-full [&_img]:h-auto [&_img]:rounded-lg [&_img]:my-4
            [&_table]:w-full [&_table]:border-collapse [&_table]:mb-4
            [&_th]:border [&_th]:border-gray-300 [&_th]:px-4 [&_th]:py-2 [&_th]:bg-gray-50
            [&_td]:border [&_td]:border-gray-300 [&_td]:px-4 [&_td]:py-2"
            v-html="articleDetail.content">
          </div>
        </div>
        <!-- 评论区 -->
        <div class="w-full bg-white rounded-2xl shadow-2xl p-6 mb-5">
          <Comments :article_id="id" />
        </div>

      </div>
      <!-- 右侧卡片区 -->
      <div class="hidden lg:block">
        <!-- 个人卡片 -->
        <div
          class="px-6 py-8 bg-gradient-to-br from-blue-50 to-purple-50 rounded-2xl shadow-lg border border-gray-100 mb-5">
          <!-- 头像和基本信息 -->
          <div class="flex flex-col items-center mb-4">
            <div class="relative group mb-3">
              <!-- 头像光晕效果 -->
              <div
                class="absolute inset-0 bg-gradient-to-r from-blue-400 to-purple-400 rounded-full blur opacity-75 group-hover:opacity-100 transition-opacity duration-300">
              </div>
              <img src="@/assets/logo.png" alt="作者头像"
                class="relative w-16 h-16 rounded-full border-4 border-white shadow-lg transition-transform duration-300 group-hover:scale-110" />
            </div>
            <h3 class="text-lg font-bold text-gray-800 mb-1">博客作者</h3>
            <p class="text-sm text-gray-600 text-center">热爱分享技术与生活</p>
          </div>

          <!-- 统计数据 -->
          <div class="grid grid-cols-2 gap-3 mb-4">
            <div class="text-center bg-white/50 rounded-lg p-2 backdrop-blur-sm">
              <div class="text-blue-600 font-bold text-lg">{{ countStore.articleCount }}</div>
              <div class="text-xs text-gray-500">文章</div>
            </div>
            <div class="text-center bg-white/50 rounded-lg p-2 backdrop-blur-sm">
              <div class="text-green-600 font-bold text-lg">{{ countStore.galleryCount }}</div>
              <div class="text-xs text-gray-500">图库</div>
            </div>
            <div class="text-center bg-white/50 rounded-lg p-2 backdrop-blur-sm">
              <div class="text-purple-600 font-bold text-lg">{{ countStore.diaryCount }}</div>
              <div class="text-xs text-gray-500">随笔</div>
            </div>
            <div class="text-center bg-white/50 rounded-lg p-2 backdrop-blur-sm">
              <div class="text-orange-600 font-bold text-lg">
                {{ countStore.articleCount + countStore.galleryCount + countStore.diaryCount }}</div>
              <div class="text-xs text-gray-500">总计</div>
            </div>
          </div>

          <!-- 联系信息 -->
          <div class="text-center">
            <div class="inline-flex items-center space-x-2 bg-white/70 backdrop-blur-sm rounded-full px-4 py-2">
              <span class="text-gray-600 text-sm">📧 联系作者</span>
            </div>
          </div>
        </div>
        <!-- 文章信息 -->
        <div class="px-6 py-5 bg-gradient-to-br from-white to-gray-50 rounded-2xl shadow-lg border border-gray-100 backdrop-blur-sm">
          <!-- 标题 -->
          <div class="flex items-center mb-4">
            <div class="w-1 h-6 bg-gradient-to-b from-blue-500 to-purple-600 rounded-full mr-3"></div>
            <h3 class="text-xl font-bold text-gray-800">文章信息</h3>
          </div>
          
          <!-- 分类信息 -->
          <div class="mb-4">
            <div class="flex items-center mb-2">
              <span class="text-sm font-medium text-gray-600 mr-3">📂 分类</span>
              <span class="px-3 py-1 bg-gradient-to-r from-blue-100 to-blue-50 text-blue-700 rounded-full text-sm font-medium border border-blue-200">
                {{ subsetStore.subsetName(articleDetail.subset_id) }}
              </span>
            </div>
          </div>
          
          <!-- 标签区域 -->
          <div v-if="articleDetail.label">
            <div class="flex items-center mb-3">
              <span class="text-sm font-medium text-gray-600 mr-3">🏷️ 标签</span>
            </div>
            <div class="flex flex-wrap gap-2">
              <div v-for="(tag, index) in stringToArray(articleDetail.label)" :key="tag" 
                   class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium transition-all duration-300 transform hover:scale-105 hover:shadow-md"
                   :class="[
                     index % 3 === 0 ? 'bg-gradient-to-r from-sky-100 to-sky-50 text-sky-700 border border-sky-200 hover:from-sky-200 hover:to-sky-100' :
                     index % 3 === 1 ? 'bg-gradient-to-r from-amber-100 to-amber-50 text-amber-700 border border-amber-200 hover:from-amber-200 hover:to-amber-100' :
                     'bg-gradient-to-r from-rose-100 to-rose-50 text-rose-700 border border-rose-200 hover:from-rose-200 hover:to-rose-100'
                   ]">
                {{ tag }}
              </div>
            </div>
          </div>
          
          <!-- 无标签提示 -->
          <div v-else class="text-center py-4">
            <span class="text-gray-400 text-sm">暂无标签</span>
          </div>
        </div>


      </div>

    </div>
    <!-- 手机端卡片下 -->
    <div class="lg:hidden">

    </div>
  </div>
</template>

<style scoped>
/* 文章内容字体优化 */
.htmlcontent {
  font-family: 'Georgia', 'Times New Roman', 'STSong', 'SimSun', serif;
  letter-spacing: 0.02em;
  text-align: justify;
  word-break: break-word;
}

/* 标题样式优化 */
.htmlcontent :deep(h1),
.htmlcontent :deep(h2),
.htmlcontent :deep(h3),
.htmlcontent :deep(h4),
.htmlcontent :deep(h5),
.htmlcontent :deep(h6) {
  font-family: 'Helvetica Neue', 'Arial', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  font-weight: 600;
  color: #2d3748;
  margin-top: 1.5em;
  margin-bottom: 0.8em;
  line-height: 1.4;
}

/* 段落样式优化 */
.htmlcontent :deep(p) {
  text-indent: 2em;
  margin-bottom: 1.2em;
  line-height: 1.8;
}

/* 列表样式优化 */
.htmlcontent :deep(ul),
.htmlcontent :deep(ol) {
  padding-left: 2em;
  margin-bottom: 1.2em;
}

.htmlcontent :deep(li) {
  margin-bottom: 0.5em;
  line-height: 1.7;
}

/* 引用样式优化 */
.htmlcontent :deep(blockquote) {
  border-left: 4px solid #cbd5e0;
  padding-left: 1.5em;
  margin: 1.5em 0;
  font-style: italic;
  color: #4a5568;
  background-color: #f7fafc;
  padding: 1em;
  border-radius: 0 0.5em 0.5em 0;
}

/* 代码样式优化 */
.htmlcontent :deep(code) {
  font-family: 'Fira Code', 'Monaco', 'Consolas', 'Courier New', monospace;
  background-color: #edf2f7;
  padding: 0.2em 0.4em;
  border-radius: 0.25em;
  font-size: 0.9em;
  color: #d53f8c;
}

.htmlcontent :deep(pre) {
  background-color: #2d3748;
  color: #e2e8f0;
  padding: 1.5em;
  border-radius: 0.5em;
  overflow-x: auto;
  margin: 1.5em 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.htmlcontent :deep(pre code) {
  background-color: transparent;
  color: inherit;
  padding: 0;
}

/* 链接样式优化 */
.htmlcontent :deep(a) {
  color: #3182ce;
  text-decoration: none;
  transition: color 0.2s ease, border-bottom-color 0.2s ease;
  border-bottom: 1px solid transparent;
}

.htmlcontent :deep(a:hover) {
  color: #2c5282;
  border-bottom-color: #2c5282;
}

/* 表格样式优化 */
.htmlcontent :deep(table) {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.95em;
}

.htmlcontent :deep(th),
.htmlcontent :deep(td) {
  border: 1px solid #e2e8f0;
  padding: 0.75em 1em;
  text-align: left;
}

.htmlcontent :deep(th) {
  background-color: #edf2f7;
  font-weight: 600;
}

.htmlcontent :deep(tr:nth-child(even)) {
  background-color: #f7fafc;
}

/* 图片样式优化 */
.htmlcontent :deep(img) {
  max-width: 100%;
  height: auto;
  border-radius: 0.5em;
  margin: 1.5em 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 强调文本样式 */
.htmlcontent :deep(strong) {
  font-weight: 600;
  color: #2d3748;
}

.htmlcontent :deep(em) {
  font-style: italic;
  color: #4a5568;
}

/* 分隔线样式 */
.htmlcontent :deep(hr) {
  border: none;
  height: 2px;
  background: linear-gradient(to right, transparent, #cbd5e0, transparent);
  margin: 2em 0;
}
</style>
